{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>模态对话框</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>数据表格2（在下文中简称为数据表格）是一个全新的数据表格视图组件，相比较<a href="#view/datatable">数据表格</a>提供更强大的功能，支持远程数据显示、排序、搜索以及海量数据显示。</p></article>









<section><header><h3>综合示例</h3></header><article><h4>引入资源</h4><p>数据表格2为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/datagrid/zui.datagrid.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/datagrid/zui.datagrid.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><div class="example">
  <div id="datagridExample" class="datagrid datagrid-borderless">
    <header class="clearfix">
      <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample1">
        <input id="inputSearchExample1" type="search" class="form-control search-input empty" placeholder="搜索">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
      <h3>数据表格功能综合演示</h3>
    </header>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 904px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 221px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-cell datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1224px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">#</label></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-1" data-type="head" data-col="1" data-row="0" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-2" data-type="head" data-col="2" data-row="0" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmnkcm-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">1</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-1" data-type="cell" data-col="1" data-row="1" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-2" data-type="cell" data-col="2" data-row="1" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">2</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-1" data-type="cell" data-col="1" data-row="2" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-2" data-type="cell" data-col="2" data-row="2" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">3</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-1" data-type="cell" data-col="1" data-row="3" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-2" data-type="cell" data-col="2" data-row="3" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">4</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-1" data-type="cell" data-col="1" data-row="4" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-2" data-type="cell" data-col="2" data-row="4" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">5</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-1" data-type="cell" data-col="1" data-row="5" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-2" data-type="cell" data-col="2" data-row="5" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">6</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-1" data-type="cell" data-col="1" data-row="6" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-2" data-type="cell" data-col="2" data-row="6" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">7</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-1" data-type="cell" data-col="1" data-row="7" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-2" data-type="cell" data-col="2" data-row="7" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmnkcm-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmnkcm-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">8</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-1" data-type="cell" data-col="1" data-row="8" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-2" data-type="cell" data-col="2" data-row="8" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmnkcm-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div></div></div>
    <div class="pager"><li class="active disabled pager-item-left"><a title="第 1 页" class="pager-item" data-page="1" href="#page=1"><i class="icon icon-step-backward"></i></a></li><li class="disabled"><a title="第 0 页" class="pager-item" data-page="0" href="###"><i class="icon icon-double-angle-left"></i></a></li><li class="active disabled"><a title="第 1 页" class="pager-item" data-page="1" href="#page=1">1</a></li><li><a title="第 2 页" class="pager-item" data-page="2" href="#page=2">2</a></li><li><a title="第 3 页" class="pager-item" data-page="3" href="#page=3">3</a></li><li><a title="第 4 页" class="pager-item" data-page="4" href="#page=4">4</a></li><li><a title="第 5 页" class="pager-item" data-page="5" href="#page=5">5</a></li><li><a title="第 6 页" class="pager-item" data-page="6" href="#page=6">6</a></li><li><a title="第 7 页" class="pager-item" data-page="7" href="#page=7">7</a></li><li><a title="第 8 页" class="pager-item" data-page="8" href="#page=8">8</a></li><li><a title="第 9 页" class="pager-item" data-page="9" href="#page=9">9</a></li><li><a title="第 10 页" class="pager-item" data-page="10" href="#page=10">10</a></li><li><a title="第 2 页" class="pager-item" data-page="2" href="#page=2"><i class="icon icon-double-angle-right"></i></a></li><li class="pager-item-right"><a title="第 10 页" class="pager-item" data-page="10" href="#page=10"><i class="icon icon-step-forward"></i></a></li><li><div class="pager-label">第 <strong>1</strong>/<strong>10</strong> 页</div></li><li><div class="pager-label">第 <strong>1</strong> ~ <strong>10</strong> 项</div></li><li><div class="pager-label">共 <strong>100</strong> 项</div></li></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[...],</span><span class="pln">
    </span><span class="pun">...</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>当所有选项都可以通过 <code>data-*</code> 属性设置时，则可以通过 <code>data-ride="datagrid"</code> 来在页面加载后自动进行初始化。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre></article></section>
















































<section><header><h3>数据源</h3></header><article><p>数据源是用于定义数据网格数据的格式和获取方式。数据源通过 <code>dataSource</code> 选项进行配置。<code>dataSource</code> 选项值为一个对象，可用的属性包括：</p><ul>
<li><code>cols</code>：一个列定义对象数组，用于定义数据源上要显示的列，数组内对象的顺序即是列排列显示的顺序，列对象定义参见下文；</li>
<li><code>array</code>：可选，当使用静态数组定义数据时，使用此属性来定义所有数据；</li>
<li><code>remote</code>：可选，当从远程加载数据时，使用此属性来指定远程请求的地址，或者使用此属性指定一个函数用于动态生成每次请求所使用的 ajax 参数对象；</li>
<li><code>remoteConverter</code>：可选，当从远程加载数据时，使用此属性来转换远程内容，确保远程数据符合数据表格所要求的格式，如果远程数据已经通过 JSON 返回了符合要求的数据，则无需使用此属性进行转换操作；</li>
<li><code>getByIndex</code>：可选，当使用动态数据时，使用此属性指定一个函数用于动态返回数据项目；</li>
<li><code>cache</code>: 如果设置为 <code>true</code>，则启用数据查询缓存，如果设置为 <code>false</code>，则不启用数据查询缓存，默认为 <code>true</code>；</li>
<li><code>cacheSize</code>: 设置启用数据查询缓存时最大缓存数量，默认为 <code>1</code>。</li>
</ul><h4>数据项定义</h4><p>数据项使用一个简单的 JavaScript 对象来表示。数据项对象中应该包含列定义（需要在界面上显示的列）中的所有属性，并且需要包含一个 <code>id</code> 属性用于行编号，如果没有指定 <code>id</code> 属性，则使用行序号作为行编号。</p><h4>数据源列定义</h4><p>数据表格上要显示的列通过列定义数组来设置。一个列定义对象数组，用于定义数据源上要显示的列，数组内对象的顺序即是列排列显示的顺序。每一个列定义对象包含如下属性：</p><ul>
<li><code>name</code>: 列上要显示的数据属性名称；</li>
<li><code>label</code>: 可选，列标题文本，如果不定义此属性则使用 <code>name</code> 属性作为标题文本；</li>
<li><code>html</code>: 默认为 <code>false</code>，如果设置为 <code>true</code>，则在渲染列时将内容作为 html 源码更新到页面上；</li>
<li><code>style</code>: 可选，在该列上所以单元格元素上要添加的样式（使用 jQuery CSS 样式定义对象规则）；</li>
<li><code>width</code>: 列宽度，如果设置为小于 <code>1</code> 的浮点数，则将此值用于自适应时计算最终宽度的权值；</li>
<li><code>minWidth</code>：列最小宽度，当启用自适应时，最终计算的宽度不会小于该值；</li>
<li><code>className</code>: 可选，在该列上所有单元格元素上要添加的类名；</li>
<li><code>checkbox</code>: 默认为 <code>false</code>，如果设置为 <code>true</code>，则在此列单元格内显示勾选框；</li>
<li><code>valueType</code>：该列值类型，默认 <code>string</code>；</li>
<li><code>valueOperator</code>: 可选，该列上的值转换器；</li>
<li><code>sort</code>：是否为当前列开启排序功能，默认为 <code>true</code>，如果设置为 <code>false</code>，即便 <code>sortable</code> 选项设置为 <code>true</code> 也无法使用该列进行排序；</li>
<li><code>sortFunc</code>：可选，当使用该列排序时的比较函数。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">132</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'英雄'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">134</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'action'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'动作'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'target'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'目标'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'描述'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">287</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">],</span><span class="pln">
        </span><span class="com">// ... Data source 其他属性</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="com">// ... 其他初始化选项</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>静态数据源</h4><p>定义数据源最简单的方式是给定一个静态对象数组。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">132</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hera'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'英雄'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">134</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'action'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'动作'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'target'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'目标'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'描述'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">287</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">],</span><span class="pln">
        array</span><span class="pun">:[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">time</span><span class="pun">:</span><span class="pln"> </span><span class="str">'00:11:12'</span><span class="pun">,</span><span class="pln"> hero</span><span class="pun">:</span><span class="str">'幻影刺客'</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">:</span><span class="pln"> </span><span class="str">'击杀'</span><span class="pun">,</span><span class="pln"> target</span><span class="pun">:</span><span class="pln"> </span><span class="str">'斧王'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'幻影刺客击杀了斧王。'</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">time</span><span class="pun">:</span><span class="pln"> </span><span class="str">'00:13:22'</span><span class="pun">,</span><span class="pln"> hero</span><span class="pun">:</span><span class="str">'幻影刺客'</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">:</span><span class="pln"> </span><span class="str">'购买了'</span><span class="pun">,</span><span class="pln"> target</span><span class="pun">:</span><span class="pln"> </span><span class="str">'隐刀'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'幻影刺客购买了隐刀。'</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">time</span><span class="pun">:</span><span class="pln"> </span><span class="str">'00:19:36'</span><span class="pun">,</span><span class="pln"> hero</span><span class="pun">:</span><span class="str">'斧王'</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">:</span><span class="pln"> </span><span class="str">'购买了'</span><span class="pun">,</span><span class="pln"> target</span><span class="pun">:</span><span class="pln"> </span><span class="str">'黑皇杖'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'斧王购买了黑皇杖。'</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">time</span><span class="pun">:</span><span class="pln"> </span><span class="str">'00:21:43'</span><span class="pun">,</span><span class="pln"> hero</span><span class="pun">:</span><span class="str">'力丸'</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">:</span><span class="pln"> </span><span class="str">'购买了'</span><span class="pun">,</span><span class="pln"> target</span><span class="pun">:</span><span class="pln"> </span><span class="str">'隐刀'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'力丸购买了隐刀。'</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="com">// ... 其他初始化选项</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>远程数据源</h4><p>有时需要从远程获取数据，数据表格支持通过 Ajax 获取远程数据作为数据源，而且使用起来非常灵活。通过数据源对象的 <code>remote</code> 和 <code>remoteConverter</code> 属性来配置远程数据源。</p><h5>远程请求参数</h5><p>远程请求参数通过 <code>remote</code> 属性来配置。如果是静态地址，则直接使用远程连接地址作为 <code>remote</code> 配置的值，如果要根据当前请求的页码和搜索文本等信息进行动态请求配置，则可以将 <code>remote</code> 配置的值指定为一个回调函数来动态返回配置。<code>remote</code> 配置回调函数参数定义如下：</p><ul>
<li><code>params</code>: 请求的参数信息对象；</li>
<li><code>datagrid</code>: 数据网格实例对象。</li>
</ul><p>其中 <code>params</code> 对象包含如下属性：</p><ul>
<li><code>page</code>: 当前显示的页码；</li>
<li><code>recPerPage</code>: 当前设定每页显示的数据个数；</li>
<li><code>search</code>: 当前用于检索数据的文本；</li>
<li><code>sortBy</code>: 当前排序依据的列名；</li>
<li><code>order</code>: 当前排序的顺序，包括顺序（<code>'asc'</code>）和倒序（<code>'desc'</code>）。</li>
</ul><p>远程请求参数对象可以使用 <a href="https://github.com/easysoft/zui/commits/master">jQuery.ajax</a> 方法接受的所有选项。</p><h5>远程数据格式</h5><p>远程数据必须返回一个 JSON 格式的对象，此对象包含如下属性：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 原创数据对象</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 数据请求结果（必须），当值为 'succes'、'ok' 或 200 时则是为请求成功</span><span class="pln">
    </span><span class="str">"result"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"success"</span><span class="pun">,</span><span class="pln">

    </span><span class="com">// 远程数据内容（必须）</span><span class="pln">
    </span><span class="str">"data"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="com">// ... 原创数据对象数组</span><span class="pln">
    </span><span class="pun">],</span><span class="pln">

    </span><span class="com">// 用户界面提示消息，当请求结果失败时，可以使用此属性返回文本显示在用户界面上</span><span class="pln">
    </span><span class="str">"message"</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">,</span><span class="pln">

    </span><span class="com">// 远程数据的分页信息对象（必须），其中</span><span class="pln">
    </span><span class="str">"pager"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="str">"page"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">           </span><span class="com">// 当前数据对应的页码</span><span class="pln">
        </span><span class="str">"recTotal"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1001</span><span class="pun">,</span><span class="pln">    </span><span class="com">// 总的数据数目</span><span class="pln">
        </span><span class="str">"recPerPage"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln">    </span><span class="com">// 每页数据数目</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre><p>当远程请求返回的内容不符合上面的格式时，则需要使用 <code>remoteConverter</code> 指定一个回调函数来将远程数据转换为符合要求的格式。<code>remoteConverter</code> 回调函数包含如下参数：</p><ul>
<li><code>responseData</code>：远程请求返回的文本内容；</li>
<li><code>textStatus</code>：原创请求状态；</li>
<li><code>jqXHR</code>：jQuery 的 xhr 对象；</li>
<li><code>datagrid</code>：数据网格实例对象。</li>
</ul><div class="example">
  <div id="remoteDataGridExample" class="datagrid"><div class="datagrid-container" style="width: auto; border-width: 1px; height: 221px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: none;"><div class="bar"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: none;"><div class="bar"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 797px; height: 221px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head" id="zui-datagrid-fhc9bmole5-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmole5-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmole5-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmole5-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmole5-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">目标</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmole5-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">描述</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmole5-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">00:11:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">击杀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">幻影刺客击杀了斧王。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmole5-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">00:13:22</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">幻影刺客购买了隐刀。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmole5-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">00:19:36</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">斧王购买了黑皇杖。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmole5-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">00:21:43</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">力丸购买了隐刀。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmole5-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmole5-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 25px; width: 133px; border-width: 1px;">00:22:03</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 157px; width: 135px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 291px; width: 110px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 400px; width: 110px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmole5-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 509px; width: 289px; border-width: 1px;">力丸购买了跳刀。</div></div></div><div class="datagrid-loading" style="display: none;"><div class="content"><i class="icon icon-spin icon-spinner icon-2x"></i><div classname="datagrid-loading-message"></div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"remoteDataGridExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#remoteDataGridExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">132</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hera'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'英雄'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">134</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'action'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'动作'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'target'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'目标'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'描述'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">287</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">],</span><span class="pln">
        remote</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">params</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">// 原创请求地址</span><span class="pln">
                url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'docs/partial/remote-data.json'</span><span class="pun">,</span><span class="pln">
                </span><span class="com">// 请求类型</span><span class="pln">
                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'GET'</span><span class="pun">,</span><span class="pln">
                </span><span class="com">// 数据类型</span><span class="pln">
                dataType</span><span class="pun">:</span><span class="pln"> </span><span class="str">'json'</span><span class="pln">
            </span><span class="pun">};</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>动态数据</h4><p>动态数据允许使用一个函数来生成数据，数据只在需要显示的时候获取。通过这种方式，可以实现上亿的海量数据显示。</p><p>要启用动态数据源，只需要为数据源对象（<code>dataSource</code> 选项）的 <code>getByIndex</code> 属性设置一个回调函数，在该回调函数中返回对应索引的对象即可。该回调函数参数定义如下：</p><ul>
<li><code>index</code>：要获取的数据行索引；</li>
<li><code>params</code>：数据检索参数。</li>
</ul><p>其中 <code>params</code> 对象包含如下属性：</p><ul>
<li><code>page</code>: 当前显示的页码；</li>
<li><code>recPerPage</code>: 当前设定每页显示的数据个数；</li>
<li><code>search</code>: 当前用于检索数据的文本；</li>
<li><code>sortBy</code>: 当前排序依据的列名；</li>
<li><code>order</code>: 当前排序的顺序，包括顺序（<code>'asc'</code>）和倒序（<code>'desc'</code>）。</li>
</ul><div class="alert alert-warning">
  <h4>动态数据源性能提示</h4>
  <p>当使用动态数据源时，如果一次性展示的数据比较多，受限于计算机性能，应该关闭排序、搜索、行选中等操作，否则可能导致界面无响应。</p>
</div><div class="alert alert-primary">
  <h4>动态数据源使用限制</h4>
  <p>当使用动态数据源时，不支持分页功能。</p>
</div><div class="example">
  <div id="dynamicDataGridExample" class="datagrid">
    <header>
      <h1>动态数据</h1>
      <p class="small">使用动态数据源实现上亿的海量数据展示。</p>
    </header>
  <div class="datagrid-container" style="width: auto; border-width: 1px; height: 400px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 857px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 20px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1290px; height: 400px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmop92-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-1" data-type="head" data-col="1" data-row="0" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-2" data-type="head" data-col="2" data-row="0" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmop92-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-1" data-type="cell" data-col="1" data-row="1" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-2" data-type="cell" data-col="2" data-row="1" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-1" data-type="cell" data-col="1" data-row="2" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-2" data-type="cell" data-col="2" data-row="2" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-1" data-type="cell" data-col="1" data-row="3" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-2" data-type="cell" data-col="2" data-row="3" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-1" data-type="cell" data-col="1" data-row="4" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-2" data-type="cell" data-col="2" data-row="4" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-1" data-type="cell" data-col="1" data-row="5" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-2" data-type="cell" data-col="2" data-row="5" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-1" data-type="cell" data-col="1" data-row="6" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-2" data-type="cell" data-col="2" data-row="6" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-1" data-type="cell" data-col="1" data-row="7" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-2" data-type="cell" data-col="2" data-row="7" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-1" data-type="cell" data-col="1" data-row="8" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-2" data-type="cell" data-col="2" data-row="8" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-9" data-row="9" data-id="9" style="height: 36px; top: 333px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-9-0" data-type="index" data-col="0" data-row="9" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">9</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-1" data-type="cell" data-col="1" data-row="9" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:41</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-2" data-type="cell" data-col="2" data-row="9" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-3" data-type="cell" data-col="3" data-row="9" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-4" data-type="cell" data-col="4" data-row="9" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-5" data-type="cell" data-col="5" data-row="9" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-6" data-type="cell" data-col="6" data-row="9" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-7" data-type="cell" data-col="7" data-row="9" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-8" data-type="cell" data-col="8" data-row="9" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-9" data-type="cell" data-col="9" data-row="9" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">1581</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-10" data-type="cell" data-col="10" data-row="9" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">2615</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-9-11" data-type="cell" data-col="11" data-row="9" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">祈求者拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-9-12" data-type="cell" data-col="12" data-row="9" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmop92-row-10" data-row="10" data-id="10" style="height: 36px; top: 370px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-10-0" data-type="index" data-col="0" data-row="10" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">10</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-1" data-type="cell" data-col="1" data-row="10" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">00:10:48</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-2" data-type="cell" data-col="2" data-row="10" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-3" data-type="cell" data-col="3" data-row="10" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-4" data-type="cell" data-col="4" data-row="10" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-5" data-type="cell" data-col="5" data-row="10" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-6" data-type="cell" data-col="6" data-row="10" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-7" data-type="cell" data-col="7" data-row="10" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;">568</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-8" data-type="cell" data-col="8" data-row="10" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;">162</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-9" data-type="cell" data-col="9" data-row="10" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">977</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-10" data-type="cell" data-col="10" data-row="10" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">810</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10-11" data-type="cell" data-col="11" data-row="10" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 162，并获得了经验 568。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-10-12" data-type="cell" data-col="12" data-row="10" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell datagrid-fixed datagrid-fixed-edge-bottom" id="zui-datagrid-fhc9bmop92-row-10000000000000" data-row="10000000000000" data-id="10000000000000" style="height: 36px; top: 364px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmop92-cell-10000000000000-0" data-type="index" data-col="0" data-row="10000000000000" style="top: -1px; bottom: -1px; width: 131px; border-width: 1px; left: -1px;">10000000000000</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-1" data-type="cell" data-col="1" data-row="10000000000000" style="text-align: right; top: -1px; bottom: -1px; left: 129px; width: 131px; border-width: 1px;">13888888889:03:16</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-2" data-type="cell" data-col="2" data-row="10000000000000" style="font-weight: bold; color: rgb(68, 138, 255); top: -1px; bottom: -1px; left: 259px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-3" data-type="cell" data-col="3" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 339px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-4" data-type="cell" data-col="4" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 419px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-5" data-type="cell" data-col="5" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 499px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-6" data-type="cell" data-col="6" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 579px; width: 81px; border-width: 1px;">虚灵之刃</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-7" data-type="cell" data-col="7" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 659px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-8" data-type="cell" data-col="8" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 739px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-9" data-type="cell" data-col="9" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 819px; width: 81px; border-width: 1px;">430000000002658</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-10" data-type="cell" data-col="10" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 899px; width: 81px; border-width: 1px;">710000000004441</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmop92-cell-10000000000000-11" data-type="cell" data-col="11" data-row="10000000000000" style="top: -1px; bottom: -1px; left: 979px; width: 201px; border-width: 1px;">斧王购买了“虚灵之刃”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmop92-cell-10000000000000-12" data-type="cell" data-col="12" data-row="10000000000000" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">1000000000002</div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dynamicDataGridExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dynamicDataGridExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        getByIndex</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">index</span><span class="pun">,</span><span class="pln"> param</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">// ...</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    checkable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">    </span><span class="com">// 禁用勾选</span><span class="pln">
    sortable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">     </span><span class="com">// 禁用排序</span><span class="pln">
</span><span class="pun">})；</span></code></pre><h4>使用原生表格初始化</h4><p>与旧版本数据表格一致，数据表格2仍然支持直接使用一个原生的数据表格进行初始化。</p><div class="example">
  <table class="table table-bordered" id="tableDataGridExample" style="display: none;">
    <thead>
      <tr>
        <th>时间</th>
        <th>英雄</th>
        <th>动作</th>
        <th>目标</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00:11:12</td>
        <td>幻影刺客</td>
        <td>击杀</td>
        <td>斧王</td>
        <td>幻影刺客击杀了斧王。</td>
      </tr>
      <tr>
        <td>00:13:22</td>
        <td>幻影刺客</td>
        <td>购买了</td>
        <td>隐刀</td>
        <td>幻影刺客购买了隐刀。</td>
      </tr>
      <tr>
        <td>00:19:36</td>
        <td>斧王</td>
        <td>购买了</td>
        <td>黑皇杖</td>
        <td>斧王购买了黑皇杖。</td>
      </tr>
      <tr>
        <td>00:21:43</td>
        <td>力丸</td>
        <td>购买了</td>
        <td>隐刀</td>
        <td>力丸购买了隐刀。</td>
      </tr>
    </tbody>
  </table><div class="datagrid" id="datagrid-fhc9bmoeg4"><div class="datagrid-container" style="width: auto; border-width: 1px; height: 184px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 1025px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: none;"><div class="bar"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1079px; height: 184px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head" id="zui-datagrid-fhc9bmoeg4-row-0" data-row="0" data-id="0" style="top: 0px; height: 36px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoeg4-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmoeg4-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 25px; width: 181px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmoeg4-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 205px; width: 184px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmoeg4-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 388px; width: 150px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmoeg4-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 537px; width: 150px; border-width: 1px;">目标</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmoeg4-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 686px; width: 394px; border-width: 1px;">描述</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoeg4-row-1" data-row="1" data-id="1" style="top: 37px; height: 36px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoeg4-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 25px; width: 181px; border-width: 1px;">00:11:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 205px; width: 184px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 388px; width: 150px; border-width: 1px;">击杀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 537px; width: 150px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 686px; width: 394px; border-width: 1px;">幻影刺客击杀了斧王。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoeg4-row-2" data-row="2" data-id="2" style="top: 74px; height: 36px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoeg4-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 25px; width: 181px; border-width: 1px;">00:13:22</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 205px; width: 184px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 388px; width: 150px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 537px; width: 150px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 686px; width: 394px; border-width: 1px;">幻影刺客购买了隐刀。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoeg4-row-3" data-row="3" data-id="3" style="top: 111px; height: 36px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoeg4-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 25px; width: 181px; border-width: 1px;">00:19:36</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 205px; width: 184px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 388px; width: 150px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 537px; width: 150px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 686px; width: 394px; border-width: 1px;">斧王购买了黑皇杖。</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoeg4-row-4" data-row="4" data-id="4" style="top: 148px; height: 36px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoeg4-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 27px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 25px; width: 181px; border-width: 1px;">00:21:43</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 205px; width: 184px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 388px; width: 150px; border-width: 1px;">购买了</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 537px; width: 150px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoeg4-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 686px; width: 394px; border-width: 1px;">力丸购买了隐刀。</div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-bordered"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tableDataGridExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;thead&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">时间</span><span class="tag">&lt;/th&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">英雄</span><span class="tag">&lt;/th&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">动作</span><span class="tag">&lt;/th&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">目标</span><span class="tag">&lt;/th&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">描述</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/thead&gt;</span><span class="pln">
  </span><span class="tag">&lt;tbody&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">00:11:12</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">幻影刺客</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">击杀</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">斧王</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">幻影刺客击杀了斧王。</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/tbody&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#tableDataGridExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">();</span></code></pre></article></section>






<section><header><h3>固定行和列</h3></header><article><p>数据表格支持将行和列固定在表格的一侧，当视图滚动时，固定的行和列仍然保持原来的位置。固定行和列功能通过 <code>states</code> 选项进行设置，为 <code>states</code> 设置如下属性来启用该功能：</p><ul>
<li><code>fixedLeftUntil</code>：左侧固定列索引的终止值，当列索引小于或等于该值时则将列固定在表格左侧，默认为 <code>0</code>（即固定左侧行编号所在列）；</li>
<li><code>fixedRightFrom</code>： 右侧固定列索引的起始值，当列索引大于或等于该值时则将列固定在表格右侧，默认为 <code>-1</code>（不在右侧固定列）；</li>
<li><code>fixedTopUntil</code>： 顶部固定列索引的终止值，当列索引小于或等于该值时则将列固定在表格上方，默认为 <code>0</code>（即固定上方标题所在列）；</li>
<li><code>fixedBottomFrom</code>： 底部固定列索引的起始值，当列索引大于或等于该值时则将列固定在表格下方，默认为 <code>-1</code>（不在下方固定列）。</li>
</ul><div class="example">
  <div id="datagridFixedExample" class="datagrid">
    <header class="clearfix">
      <h3>数据表格固定行和列演示 <small>行和列分别可以固定在表格上、下、左、右四个方向</small></h3>
    </header>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 47px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmot3z-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmot3z-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmot3z-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmot3z-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmot3z-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell datagrid-fixed datagrid-fixed-edge-right" id="zui-datagrid-fhc9bmot3z-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; width: 112px; border-width: 1px; left: 942px;">2</div></div></div></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridFixedExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridFixedExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...}</span><span class="pln">
    states</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        pager</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">page</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> recPerPage</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">},</span><span class="pln">

        fixedLeftUntil</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">    </span><span class="com">// 固定左侧第一列</span><span class="pln">
        fixedRightFrom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12</span><span class="pun">,</span><span class="pln">   </span><span class="com">// 从第12列开始固定到右侧</span><span class="pln">
        fixedTopUntil</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">     </span><span class="com">// 固定顶部第一行（标题行）</span><span class="pln">
        fixedBottomFrom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 从第100行（在此例中是最后一行）开始固定到底部</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>
















<section><header><h3>排序</h3></header><article><p>数据表格支持按照任意列进行排序，并且可以自定义排序比较函数。要启用排序功能需要将 <code>sortable</code> 选项设置为 <code>true</code>。当启用排序功能后，标题行（第一行）上的单元格会显示排序指示图标，用户可以点击标题行上的单元格按照所在列进行排序，排序方式会在每次点击时进行顺序切换，切换顺序为升序排序、降序排序、不排序。如果需要禁用根据某些列排序，则可以在列定义中将 <code>sort</code> 属性设置为 <code>false</code>。</p><p>默认排序算法使用 JavaScript 内置的默认比较算法，如果需要自定义排序函数，可以通过 <code>sortFunc</code> 选项设置一个回调函数，该回调函数参数定义如下：</p><ul>
<li><code>value1</code>：第一个要比较的值，相当于 <code>item1[sortBy]</code>；</li>
<li><code>value2</code>：第二个要比较的值，相当于 <code>item2[sortBy]</code>；</li>
<li><code>item1</code>：第一个要比较的数据条目；</li>
<li><code>item2</code>：第二个要比较的数据条目；</li>
<li><code>sortBy</code>：当前用于排序的列名；</li>
<li><code>datagrid</code>：当前数据表格实例对象。</li>
</ul><p>当第一个值大于第二个值时，排序函数应该返回大于 <code>0</code> 的数值，当第一个值小于第二个值时，排序函数应该返回小于 <code>0</code> 的值，如果相等则返回 <code>0</code>。</p><p>如果仅仅需要为单独的列应用自定义排序函数，则可以在列定义中使用 <code>sortFunc</code> 属性设置该列的排序函数，列排序函数参数定义及返回值约定与选项 <code>sortFunc</code> 一致。</p><div class="alert alert-warning">
  <h4>排序的限制</h4>
  <p>内置的完整排序功能仅支持本地静态数据源的排序，如果是远程数据源，会将排序参数发送给远端服务器，需要在服务器进行排序返回排序后的数据；动态数据源的排序也需要自己进行处理，可以根据回调函数参数应用排序规则。</p>
</div><div class="example">
  <div id="datagridSortExample" class="datagrid">
    <header class="clearfix">
      <h3>数据表格排序功能演示 <small>点击表头进行排序</small></h3>
    </header>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 920px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 24px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1202px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmoxqo-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmoxqo-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmoxqo-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 43px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 41px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 171px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 251px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 331px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 411px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 491px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 571px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 651px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 731px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 811px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 891px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmoxqo-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1091px; width: 112px; border-width: 1px;">2</div></div></div></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridSortExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridSortExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...},</span><span class="pln">
    sortable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>要手动操作排序，可以使用数据表格的实例方法 <code>sortBy(sortBy, order)</code>，该方法参数定义如下：</p><ul>
<li><code>sortBy</code>：当前用于排序的列名；</li>
<li><code>order</code>：排序顺序，可选值包括 <code>asc</code>（升序），<code>desc</code>（降序）。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridSortExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 按照 `name` 列降序排序</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">sortBy</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">);</span></code></pre><p>可以通过选项 <code>states</code> 上的如下属性设置初始状态下的排序规则：</p><ul>
<li><code>sortBy</code>：当前用于排序的列名；</li>
<li><code>order</code>：排序顺序，可选值包括 <code>asc</code>（升序，默认），<code>desc</code>（降序）。</li>
</ul></article></section>












<section><header><h3>分页</h3></header><article><p>数据表格支持对数据进行分页，支持静态数据源和远程数据源分页操作，并且可以结合<a href="#javascript/pagerjs">分页器插件</a>一起使用。要启用分页功能，需要为 <code>states</code> 选项设置 <code>pager</code> 属性。<code>pager</code> 属性为一个对象，包含如下属性：</p><ul>
<li><code>page</code>：当前页码，默认为<code>0</code>（不启用分页）</li>
<li><code>recPerPage</code>: 每页记录数目，默认为 <code>10</code>。</li>
</ul><p>分页可以与<a href="#javascript/pagerjs">分页器插件</a>一起使用，在 <code>.datagrid</code> 元素内包含 <code>.pager</code> 元素即可自动绑定分页器组件。</p><div class="example">
  <div id="datagridPageExample" class="datagrid">
    <header class="clearfix">
      <h3>数据表格分页功能演示</h3>
    </header>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp0tt-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp0tt-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp0tt-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp0tt-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div></div></div>
    <div class="pager"><li class="active disabled pager-item-left"><a title="第 1 页" class="pager-item" data-page="1" href="#page=1"><i class="icon icon-step-backward"></i></a></li><li class="disabled"><a title="第 0 页" class="pager-item" data-page="0" href="###"><i class="icon icon-double-angle-left"></i></a></li><li class="active disabled"><a title="第 1 页" class="pager-item" data-page="1" href="#page=1">1</a></li><li><a title="第 2 页" class="pager-item" data-page="2" href="#page=2">2</a></li><li><a title="第 3 页" class="pager-item" data-page="3" href="#page=3">3</a></li><li><a title="第 2 页" class="pager-item" data-page="2" href="#page=2"><i class="icon icon-double-angle-right"></i></a></li><li class="pager-item-right"><a title="第 3 页" class="pager-item" data-page="3" href="#page=3"><i class="icon icon-step-forward"></i></a></li><li><div class="pager-label">第 <strong>1</strong>/<strong>3</strong> 页</div></li><li><div class="pager-label">第 <strong>1</strong> ~ <strong>20</strong> 项</div></li><li><div class="pager-label">共 <strong>50</strong> 项</div></li></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridPageExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid-container"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...},</span><span class="pln">
    states</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        pager</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">page</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> recPerPage</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>要手动操作分页，可以使用数据表格的实例方法 <code>gotoPage(page)</code>，方法参数定义如下：</p><ul>
<li><code>page</code>：要切换的页码。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 到第二页</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">gotoPage</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span></code></pre><div class="alert alert-primary">
  <h4>不再需要滚动</h4>
  <p>当启用分页时，可以通过将 <code>height</code> 选项设置为特殊值 <code>'page'</code>，从而实现自动调整数据表格高度为当前页所有行的高度，实现没有垂直滚动条的情况下显示当前页的所有数据。</p>
</div></article></section>














<section><header><h3>搜索</h3></header><article><p>数据表格支持对静态数据源和原创数据源数据进行检索。当使用远程数据源时，搜索是在服务器端进行的，服务器应该根据搜索字符串参数筛选数据；如果是静态数据，搜索是在浏览器进行的，默认的搜索策略非常到位，允许搜索字符串通过空格包含多个关键字，并且自动根据批评程序进行排序，批评程度更高的会显示在前面（搜索结果自动排序仅当用户没有进行排序时有效）。</p><p>当对静态数据源进行浏览器端搜索时，可以通过 <code>searchFunc</code> 选项指定一个搜索回调函数来自定义如何筛选数据，该函数参数定义如下：</p><ul>
<li><code>item</code>：当前检测是否符合条件的数据条目对象；</li>
<li><code>searchKeyArr</code>：当前搜索关键词数组；</li>
<li><code>index</code>：当前条目在数据源中的索引；</li>
<li><code>params</code>：其他检索条件；</li>
<li><code>datagrid</code>：当前数据表格实例对象。</li>
</ul><p>其中 <code>params</code> 参数为一个对象，包含如下属性：</p><ul>
<li><code>page</code>: 当前显示的页码；</li>
<li><code>recPerPage</code>: 当前设定每页显示的数据个数；</li>
<li><code>search</code>: 当前用于检索数据的文本；</li>
<li><code>sortBy</code>: 当前排序依据的列名；</li>
<li><code>order</code>: 当前排序的顺序，包括顺序（<code>'asc'</code>）和倒序（<code>'desc'</code>）。</li>
</ul><p>在 <code>.datagrid</code> 元素内包含一个<a href="#javascript/searchbox">搜索框组件</a>，数据表格会自动监听搜索框变更事件并自动更新结果。</p><div class="example">
  <div id="datagridSearchExample" class="datagrid">
    <div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample2" style="margin-bottom: 10px; max-width: 300px">
      <input id="inputSearchExample2" type="search" class="form-control search-input empty" placeholder="搜索">
      <label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
      <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
    </div>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmp9be-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmp9be-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmp9be-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmp9be-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmp9be-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div></div></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridSearchExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control search-box search-box-circle has-icon-left has-icon-right"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchboxExample2"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputSearchExample2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSearchExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left search-icon"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-search"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right search-clear-btn"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-remove"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid-container"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridSearchExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>可以使用数据表格的实例方法 <code>search(searchStr)</code> 手动设置搜索关键字，方法参数定义如下：</p><ul>
<li><code>searchStr</code>：用于搜索的关键字字符串，多个关键字使用空格连接。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 搜索同时包含 '数据' 和 '表格' 两个关键字的条目</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">search</span><span class="pun">(</span><span class="str">'数据 表格'</span><span class="pun">);</span></code></pre><p>可以通过选项 <code>states</code> 上的 <code>search</code> 属性设置初始状态下搜索关键字字符串。</p></article></section>
















<section><header><h3>行选择</h3></header><article><p>数据表格允许用户通过点击行或者在界面上拖拽来选定并标记行。要启用行选择功能，需要将 <code>checkable</code> 设置为 <code>true</code>。如果启用了行选中，并且页面已导入<a href="#javascript/selectable">拖拽选取插件</a>，则允许用户在界面上进行拖拽框选多行，禁用此功能，可以将 <code>selectable</code> 设置为 <code>false</code>。<code>selectable</code> 还可以接受一个对象作为拖拽选取插件初始化参数，用于自定义拖拽选取交互方式。</p><p>当启用行选择功能，并且序号列设置为显示的情况下，会自动在序号列上添加勾选框，方便用户勾选行和查阅行选中状态。如果不需要显示勾选框，可以在序号列配置中将 <code>checkbox</code> 属性设置为 <code>false</code>，如果需要在其他列上显示勾选框，则可以在对应的列定义对象上将 <code>checkbox</code> 属性设置为 <code>true</code>。</p><p>当启用行选择功能，默认情况下，用户点击行上任意位置都会切换行的选中状态，如果不需要此功能，可以将 <code>checkByClickRow</code> 选项设置为 <code>false</code>，这样只有用户点击勾选框才能够切换选中状态。</p><div class="example">
  <div id="datagridCheckableExample" class="datagrid">
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 904px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1224px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content"></label></div></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpfhn-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">1</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">2</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">3</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">4</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">5</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">6</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">7</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpfhn-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmpfhn-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">8</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpfhn-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div></div></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridCheckableExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid-container"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridCheckableExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...},</span><span class="pln">
    checkable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    checkByClickRow</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>通过 <code>getCheckItems()</code> 获取已选中的行数据项。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 获取当前已选中的行数据项</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> selectedItems </span><span class="pun">=</span><span class="pln"> myDataGrid</span><span class="pun">.</span><span class="pln">getCheckItems</span><span class="pun">();</span></code></pre><p>通过 <code>isRowChecked(rowId)</code> 检查指定的行是否已选中，其中 <code>rowId</code> 为要检查的行编号。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 检测编号为 2 的行是否选中</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> isSelect </span><span class="pun">=</span><span class="pln"> myDataGrid</span><span class="pun">.</span><span class="pln">isRowChecked</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span></code></pre><p>通过 <code>checkRow(rowIndex, checked)</code> 手动设置指定行选中状态，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要设置的行序号；</li>
<li><code>checked</code>：如果为 <code>true</code> 设置为选中，如果为 <code>false</code> 设置为非选中，否则根据之前第状态切换为另一个状态。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#datagridPageExample'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 将第2行设置为选中</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> isSelect </span><span class="pun">=</span><span class="pln"> myDataGrid</span><span class="pun">.</span><span class="pln">checkRow</span><span class="pun">(</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span></code></pre><p>可以通过选项 <code>states</code> 上的 <code>selections</code> 属性设置初始状态下行选中的状态。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    states</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 设置初始状态下行编号为 1 和 3 的行为选中状态</span><span class="pln">
        selections</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="str">'1'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'3'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre></article></section>





<section><header><h3>跨行跨列的单元格</h3></header><article><p>数据表格支持跨行跨列的单元格，该功能通过 <code>configs</code> 选项进行设置。例如设置第 1 行第一个单元格在水平方向上跨越 2 个单元格，设置第 2 行第 3 个单元格在垂直方向上跨越 3 行，则 <code>configs</code> 选项设置如下：</p><div class="example">
  <div id="datagridSpanExample" class="datagrid">
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpk4d-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell datagrid-cell-span" id="zui-datagrid-fhc9bmpk4d-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 33px; width: 211px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell datagrid-cell-span" id="zui-datagrid-fhc9bmpk4d-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -75px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpk4d-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpk4d-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpk4d-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div></div></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridSpanExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid-container"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridSpanExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    configs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        R1C1</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">colspan</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">},</span><span class="pln">
        R2C3</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">rowspan</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">}</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>















<section><header><h3>值转换器</h3></header><article><p>值转换器为一个对象，包含如下属性，用于在读取值和设置值时对值进行转换操作。值转换器上可以包含如下属性：</p><ul>
<li><code>getter</code>：转换函数，用于将值转换为界面上显示的值；</li>
<li><code>setter</code>：转换函数，用于将用户编辑的值更新到数据源中（暂不支持）。</li>
</ul><p>值转换器 <code>getter</code> 函数包含如下参数：</p><ul>
<li><code>value</code>：用于转换的原始值；</li>
<li><code>cell</code>：当前单元格信息对象；</li>
<li><code>datagrid</code>：当前数据表格实例对象。</li>
</ul><div class="example">
  <div id="datagridValueOperatorExample" class="datagrid">
    <header class="clearfix">
      <h3>数据表格值转换器例子 <small>时间列通过值转换器进行来转换操作</small></h3>
    </header>
    <div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmpnza-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-2" data-type="head" data-col="2" data-row="0" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpnza-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-1" data-type="cell" data-col="1" data-row="1" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第0分钟第0秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-2" data-type="cell" data-col="2" data-row="1" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第7分钟第7秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-2" data-type="cell" data-col="2" data-row="2" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第12分钟第12秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-2" data-type="cell" data-col="2" data-row="3" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第17分钟第17秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-2" data-type="cell" data-col="2" data-row="4" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第24分钟第24秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-2" data-type="cell" data-col="2" data-row="5" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第29分钟第29秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-2" data-type="cell" data-col="2" data-row="6" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第31分钟第31秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-2" data-type="cell" data-col="2" data-row="7" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpnza-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpnza-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">第38分钟第38秒</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-2" data-type="cell" data-col="2" data-row="8" style="top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpnza-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div></div></div>
  </div>
</div><p>值转换器可以通过如下途径进行设置，不同途径生效范围不同。</p><p>通过 <code>valueOperator</code> 选项进行设置，会影响特定类型的数据，例如下例将所有事件戳类型转换为中文日期格式：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> valueType</span><span class="pun">:</span><span class="pln"> </span><span class="str">'date'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">},</span><span class="pln">
            </span><span class="com">// ... 其他列定义</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    valueOperator</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// date 值转换器会影响所以 valueType 为 `date` 的列</span><span class="pln">
        date</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            getter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">,</span><span class="pln"> cell</span><span class="pun">,</span><span class="pln"> dataGrid</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">).</span><span class="pln">toLocaleString</span><span class="pun">();</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><div class="alert alert-primary">
  <h4>内置的日期值转换器</h4>
  <p>数据表格已经内置了对日期类型（<code>valueType</code> 为 <code>date</code>）的转换支持，可以简单的通过 <code>defaultDateFormater</code> 来设置转换的日期格式。</p>
</div><p>值转换器还可以通过列定义参数进行设置。上例可以写为：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">
                name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln">
                label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">,</span><span class="pln">
                </span><span class="com">// 值转换器仅仅影响当前列</span><span class="pln">
                valueOperator</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    getter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">,</span><span class="pln"> cell</span><span class="pun">,</span><span class="pln"> dataGrid</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">).</span><span class="pln">toLocaleString</span><span class="pun">();</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">},</span><span class="pln">
            </span><span class="com">// ... 其他列定义</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>值转换器还可以通过 <code>configs</code> 选项单独为某个单元格或某行进行设置。例如仅仅为第 2 行第 1 列应用日期值转换器“</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> valueType</span><span class="pun">:</span><span class="pln"> </span><span class="str">'date'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">},</span><span class="pln">
            </span><span class="com">// ... 其他列定义</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    configs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        R2C1</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="com">// 值转换器仅影响第 2 行第 1 列的单元格</span><span class="pln">
            valueOperator</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                getter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">,</span><span class="pln"> cell</span><span class="pun">,</span><span class="pln"> dataGrid</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">dataValue</span><span class="pun">).</span><span class="pln">toLocaleString</span><span class="pun">();</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

</span><span class="pun">})</span></code></pre></article></section>



<section><header><h3>自适应列宽</h3></header><article><p>默认情况下列宽如果没有指定的话会自动进行调整，在保证最小列宽的情况下自动根据调整其他列的宽度，确保所以列宽能够填满水平空间，如果水平空间不够显示所以列，则会允许用户在水平方向上滚动浏览其他列。如果不需要自适应列宽功能可以将 <code>responsive</code> 选项设置为 <code>false</code>，并且在列定义中为每一列手动设置宽度。</p><p>当启用自适应列宽功能时，所有没有指定宽度的列会平分剩余的水平空间，但仍然可以通过配置为列宽设置一个权值，使得拥有更大权值的列获得更多的空间。权值通过 列定义的 <code>width</code> 属性设置，必须小于 <code>1</code>。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        cols</span><span class="pun">:[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'time'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'时间'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">132</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hera'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'英雄'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">134</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'action'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'动作'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">109</span><span class="pun">},</span><span class="pln">

            </span><span class="com">// target 列自适应，占据剩余列宽的 1/4</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'target'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'目标'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.25</span><span class="pun">},</span><span class="pln">

            </span><span class="com">// desc 列自适应，占据剩余列宽的 3/4</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">:</span><span class="pln"> </span><span class="str">'描述'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.75</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">],</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>












<section><header><h3>个性化配置</h3></header><article><p>通过 <code>configs</code> 选项可以为某行、某列或某个单元格应用个性化配置。<code>configs</code> 选项为一个对象，键值为要配置的行、列或单元格标识，对应值为配置项。</p><p>配置标识格式通常是 <code>R行号C列号</code>，可以是如下形式：</p><ul>
<li><code>#10</code>：表示数据项 ID 属性为 <code>10</code> 的数据对应的行；</li>
<li><code>R0</code>：表示第 0 行，即标题行，相当于 <code>#header</code>；</li>
<li><code>R1</code>：表示第 1 行；</li>
<li><code>C0</code>：表示第 0 列，即序号列；</li>
<li><code>C2</code>：表示第 2 行；</li>
<li><code>R1C1</code>：表示第 1 行第 1 列的单元格；</li>
<li><code>#11C2</code>：表示数据项 ID 属性为 <code>10</code> 的数据对应的行，第 2 列的单元格。</li>
</ul><p>配置项支持如下属性：</p><ul>
<li><code>html</code>: 默认为 <code>false</code>，如果设置为 <code>true</code>，则在渲染所匹配单元格时将内容作为 html 源码更新到页面上；</li>
<li><code>style</code>: 可选，在所匹配的单元格元素上要添加的样式（使用 jQuery CSS 样式定义对象规则）；</li>
<li><code>className</code>: 可选，在所匹配的单元格元素上要添加的类名。</li>
</ul><p>下面的例子中将第 2 列的单元格添加 <code>.text-right</code> 类实现单元格内文本靠右对齐，并且更改文本颜色和背景色，将第 1 列 第 1 个单元格添加下划线样式：</p><div class="example">
  <div id="datagridConfigsExample" class="datagrid"><div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 926px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 115px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1194px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;"></div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-1" data-type="head" data-col="1" data-row="0" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">时间</div><div class="datagrid-cell datagrid-cell-head text-right" id="zui-datagrid-fhc9bmpr2f-cell-0-2" data-type="head" data-col="2" data-row="0" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">英雄</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">动作</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;">队友</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">敌人</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">物品/神符</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">获得经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">获得金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">累计经验</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">剩余金钱</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">描述</div><div class="datagrid-cell datagrid-cell-head" id="zui-datagrid-fhc9bmpr2f-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">累计人头</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">1</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-1" data-type="cell" data-col="1" data-row="1" style="text-decoration: underline; top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">600</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-1-2" data-type="cell" data-col="2" data-row="1" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">2</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-1" data-type="cell" data-col="1" data-row="2" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-2-2" data-type="cell" data-col="2" data-row="2" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">3</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-1" data-type="cell" data-col="1" data-row="3" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">612</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-3-2" data-type="cell" data-col="2" data-row="3" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">4</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-1" data-type="cell" data-col="1" data-row="4" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">617</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-4-2" data-type="cell" data-col="2" data-row="4" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">5</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-1" data-type="cell" data-col="1" data-row="5" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">624</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-5-2" data-type="cell" data-col="2" data-row="5" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">6</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-1" data-type="cell" data-col="1" data-row="6" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">629</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-6-2" data-type="cell" data-col="2" data-row="6" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">7</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-1" data-type="cell" data-col="1" data-row="7" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">631</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-7-2" data-type="cell" data-col="2" data-row="7" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmpr2f-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-fixed" id="zui-datagrid-fhc9bmpr2f-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 35px; border-width: 1px; left: -1px;">8</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-1" data-type="cell" data-col="1" data-row="8" style="top: -1px; bottom: -1px; left: 33px; width: 131px; border-width: 1px;">638</div><div class="datagrid-cell datagrid-cell-cell text-right" id="zui-datagrid-fhc9bmpr2f-cell-8-2" data-type="cell" data-col="2" data-row="8" style="color: rgb(0, 184, 212); background-color: rgb(224, 247, 250); top: -1px; bottom: -1px; left: 163px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 243px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 323px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 403px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 483px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 563px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 643px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 723px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 803px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 883px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmpr2f-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1083px; width: 112px; border-width: 1px;">2</div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridConfigsExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#datagridConfigsExample'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...},</span><span class="pln">
    configs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        C2</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            className</span><span class="pun">:</span><span class="pln"> </span><span class="str">'text-right'</span><span class="pun">,</span><span class="pln">
            style</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#00b8d4'</span><span class="pun">,</span><span class="pln">
                backgroundColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#e0f7fa'</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">},</span><span class="pln">
        R1C1</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            style</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">textDecoration</span><span class="pun">:</span><span class="pln"> </span><span class="str">'underline'</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><p><code>configs</code> 选项还可以为一个回调函数，该回调函数包含一个参数 <code>selector</code> 为当前要获取配置项的标识。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{...},</span><span class="pln">
    configs</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">selector</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selector </span><span class="pun">===</span><span class="pln"> </span><span class="str">'R1C1'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'red'</span><span class="pun">};</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>


<section><header><h3>自定义模板</h3></header><article><p>只需要为数据表格提供一个空的 <code>.datagrid</code> 元素即可进行初始化。在 <code>.datagrid</code> 元素内添加其他内容仍然是受支持的。默认情况下，数据表格渲染容器元素 <code>.datagrid-container</code> 是被自动添加到 <code>.datagrid</code> 元素内部最后位置，如果需要控制 <code>.datagrid-container</code> 的位置，只需要手动在合适到位置添加一个空的 <code>.datagrid-container</code> 元素。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;h1&gt;</span><span class="pln">标题</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search-box"</span><span class="tag">&gt;</span><span class="pln">...搜索框</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid-container"</span><span class="tag">&gt;</span><span class="pln">...数据表格显示区域</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div&gt;</span><span class="pln">其他内容</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>









<section><header><h3>外观选项</h3></header><article><h4>移除垂直边框</h4><p>使用 <code>.datagrid-borderless</code> 来移除垂直边框。</p><div class="example">
  <div id="datagridBorderlessExample" class="datagrid datagrid-borderless"><div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 904px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 221px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-cell datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1224px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">#</label></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-1" data-type="head" data-col="1" data-row="0" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-2" data-type="head" data-col="2" data-row="0" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo3n4-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">1</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-1" data-type="cell" data-col="1" data-row="1" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-2" data-type="cell" data-col="2" data-row="1" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">2</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-1" data-type="cell" data-col="1" data-row="2" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-2" data-type="cell" data-col="2" data-row="2" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">3</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-1" data-type="cell" data-col="1" data-row="3" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-2" data-type="cell" data-col="2" data-row="3" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">4</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-1" data-type="cell" data-col="1" data-row="4" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-2" data-type="cell" data-col="2" data-row="4" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">5</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-1" data-type="cell" data-col="1" data-row="5" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-2" data-type="cell" data-col="2" data-row="5" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">6</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-1" data-type="cell" data-col="1" data-row="6" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-2" data-type="cell" data-col="2" data-row="6" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">7</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-1" data-type="cell" data-col="1" data-row="7" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-2" data-type="cell" data-col="2" data-row="7" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo3n4-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo3n4-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">8</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-1" data-type="cell" data-col="1" data-row="8" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-2" data-type="cell" data-col="2" data-row="8" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo3n4-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridBorderlessExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid datagrid-borderless"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><h4>隔行变色</h4><div class="example">
  <div id="datagridStripedExample" class="datagrid datagrid-striped"><div class="datagrid-container" style="width: auto; border-width: 1px; height: 300px;"><div class="datagrid-scrollbar datagrid-scrollbar-h" style="display: block;"><div class="bar" style="width: 904px; left: 0px;"></div></div><div class="datagrid-scrollbar datagrid-scrollbar-v" style="display: block;"><div class="bar" style="height: 221px; top: 0px;"></div></div><div class="datagrid-cells datagrid-hover-cell datagrid-hover-row datagrid-hover-col datagrid-hover-shadow" style="width: 1224px; height: 300px; top: 0px; left: 0px;"><div class="datagrid-row datagrid-row-head datagrid-fixed" id="zui-datagrid-fhc9bmo9te-row-0" data-row="0" data-id="0" style="height: 36px; top: 0px;"><div class="datagrid-cell datagrid-cell-head datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-0-0" data-type="index" data-col="0" data-row="0" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">#</label></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-1" data-type="head" data-col="1" data-row="0" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">时间<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-2" data-type="head" data-col="2" data-row="0" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">英雄<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-3" data-type="head" data-col="3" data-row="0" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">动作<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-4" data-type="head" data-col="4" data-row="0" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;">队友<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-5" data-type="head" data-col="5" data-row="0" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">敌人<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-6" data-type="head" data-col="6" data-row="0" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">物品/神符<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-7" data-type="head" data-col="7" data-row="0" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">获得经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-8" data-type="head" data-col="8" data-row="0" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">获得金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-9" data-type="head" data-col="9" data-row="0" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">累计经验<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-10" data-type="head" data-col="10" data-row="0" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">剩余金钱<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-11" data-type="head" data-col="11" data-row="0" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">描述<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div><div class="datagrid-cell datagrid-cell-head datagrid-col-sortable" id="zui-datagrid-fhc9bmo9te-cell-0-12" data-type="head" data-col="12" data-row="0" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">累计人头<div class="datagrid-sorter"><i class="icon icon-sort"></i></div></div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-1" data-row="1" data-id="1" style="height: 36px; top: 37px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-1-0" data-type="index" data-col="0" data-row="1" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">1</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-1" data-type="cell" data-col="1" data-row="1" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:00</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-2" data-type="cell" data-col="2" data-row="1" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-3" data-type="cell" data-col="3" data-row="1" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-4" data-type="cell" data-col="4" data-row="1" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-5" data-type="cell" data-col="5" data-row="1" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-6" data-type="cell" data-col="6" data-row="1" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">隐刀</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-7" data-type="cell" data-col="7" data-row="1" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-8" data-type="cell" data-col="8" data-row="1" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-9" data-type="cell" data-col="9" data-row="1" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">336</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-10" data-type="cell" data-col="10" data-row="1" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">505</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-11" data-type="cell" data-col="11" data-row="1" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客购买了“隐刀”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-1-12" data-type="cell" data-col="12" data-row="1" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-2" data-row="2" data-id="2" style="height: 36px; top: 74px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-2-0" data-type="index" data-col="0" data-row="2" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">2</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-1" data-type="cell" data-col="1" data-row="2" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:07</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-2" data-type="cell" data-col="2" data-row="2" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">幻影刺客</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-3" data-type="cell" data-col="3" data-row="2" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-4" data-type="cell" data-col="4" data-row="2" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-5" data-type="cell" data-col="5" data-row="2" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-6" data-type="cell" data-col="6" data-row="2" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">魔法神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-7" data-type="cell" data-col="7" data-row="2" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-8" data-type="cell" data-col="8" data-row="2" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-9" data-type="cell" data-col="9" data-row="2" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">354</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-10" data-type="cell" data-col="10" data-row="2" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">607</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-11" data-type="cell" data-col="11" data-row="2" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">幻影刺客拾取了“魔法神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-2-12" data-type="cell" data-col="12" data-row="2" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">1</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-3" data-row="3" data-id="3" style="height: 36px; top: 111px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-3-0" data-type="index" data-col="0" data-row="3" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">3</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-1" data-type="cell" data-col="1" data-row="3" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:12</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-2" data-type="cell" data-col="2" data-row="3" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-3" data-type="cell" data-col="3" data-row="3" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-4" data-type="cell" data-col="4" data-row="3" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-5" data-type="cell" data-col="5" data-row="3" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-6" data-type="cell" data-col="6" data-row="3" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">圣剑</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-7" data-type="cell" data-col="7" data-row="3" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-8" data-type="cell" data-col="8" data-row="3" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-9" data-type="cell" data-col="9" data-row="3" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">92</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-10" data-type="cell" data-col="10" data-row="3" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">157</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-11" data-type="cell" data-col="11" data-row="3" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“圣剑”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-3-12" data-type="cell" data-col="12" data-row="3" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-4" data-row="4" data-id="4" style="height: 36px; top: 148px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-4-0" data-type="index" data-col="0" data-row="4" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">4</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-1" data-type="cell" data-col="1" data-row="4" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:17</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-2" data-type="cell" data-col="2" data-row="4" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-3" data-type="cell" data-col="3" data-row="4" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-4" data-type="cell" data-col="4" data-row="4" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-5" data-type="cell" data-col="5" data-row="4" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-6" data-type="cell" data-col="6" data-row="4" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">黑皇杖</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-7" data-type="cell" data-col="7" data-row="4" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-8" data-type="cell" data-col="8" data-row="4" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-9" data-type="cell" data-col="9" data-row="4" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1344</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-10" data-type="cell" data-col="10" data-row="4" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2250</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-11" data-type="cell" data-col="11" data-row="4" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者购买了“黑皇杖”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-4-12" data-type="cell" data-col="12" data-row="4" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-5" data-row="5" data-id="5" style="height: 36px; top: 185px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-5-0" data-type="index" data-col="0" data-row="5" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">5</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-1" data-type="cell" data-col="1" data-row="5" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:24</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-2" data-type="cell" data-col="2" data-row="5" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-3" data-type="cell" data-col="3" data-row="5" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">偷摸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-4" data-type="cell" data-col="4" data-row="5" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-5" data-type="cell" data-col="5" data-row="5" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;">Roshan</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-6" data-type="cell" data-col="6" data-row="5" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-7" data-type="cell" data-col="7" data-row="5" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;">824</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-8" data-type="cell" data-col="8" data-row="5" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;">32</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-9" data-type="cell" data-col="9" data-row="5" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1009</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-10" data-type="cell" data-col="10" data-row="5" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">332</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-11" data-type="cell" data-col="11" data-row="5" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸偷摸了“Roshan”，获得了金钱 32，并获得了经验 824。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-5-12" data-type="cell" data-col="12" data-row="5" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-6" data-row="6" data-id="6" style="height: 36px; top: 222px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-6-0" data-type="index" data-col="0" data-row="6" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">6</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-1" data-type="cell" data-col="1" data-row="6" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:29</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-2" data-type="cell" data-col="2" data-row="6" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">力丸</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-3" data-type="cell" data-col="3" data-row="6" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">购买</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-4" data-type="cell" data-col="4" data-row="6" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-5" data-type="cell" data-col="5" data-row="6" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-6" data-type="cell" data-col="6" data-row="6" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">远行鞋</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-7" data-type="cell" data-col="7" data-row="6" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-8" data-type="cell" data-col="8" data-row="6" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-9" data-type="cell" data-col="9" data-row="6" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">235</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-10" data-type="cell" data-col="10" data-row="6" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">405</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-11" data-type="cell" data-col="11" data-row="6" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">力丸购买了“远行鞋”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-6-12" data-type="cell" data-col="12" data-row="6" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">0</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-7" data-row="7" data-id="7" style="height: 36px; top: 259px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-7-0" data-type="index" data-col="0" data-row="7" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">7</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-1" data-type="cell" data-col="1" data-row="7" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:31</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-2" data-type="cell" data-col="2" data-row="7" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">斧王</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-3" data-type="cell" data-col="3" data-row="7" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-4" data-type="cell" data-col="4" data-row="7" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-5" data-type="cell" data-col="5" data-row="7" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-6" data-type="cell" data-col="6" data-row="7" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">双倍神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-7" data-type="cell" data-col="7" data-row="7" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-8" data-type="cell" data-col="8" data-row="7" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-9" data-type="cell" data-col="9" data-row="7" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">2983</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-10" data-type="cell" data-col="10" data-row="7" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">4969</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-11" data-type="cell" data-col="11" data-row="7" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">斧王拾取了“双倍神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-7-12" data-type="cell" data-col="12" data-row="7" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">3</div></div><div class="datagrid-row datagrid-row-cell" id="zui-datagrid-fhc9bmo9te-row-8" data-row="8" data-id="8" style="height: 36px; top: 296px;"><div class="datagrid-cell datagrid-cell-index datagrid-has-checkbox datagrid-fixed" id="zui-datagrid-fhc9bmo9te-cell-8-0" data-type="index" data-col="0" data-row="8" style="top: -1px; bottom: -1px; width: 65px; border-width: 1px; left: -1px;"><div class="checkbox-primary datagrid-checkbox"><label class="content">8</label></div></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-1" data-type="cell" data-col="1" data-row="8" style="text-align: right; top: -1px; bottom: -1px; left: 63px; width: 131px; border-width: 1px;">00:10:38</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-2" data-type="cell" data-col="2" data-row="8" style="font-weight: bold; top: -1px; bottom: -1px; left: 193px; width: 81px; border-width: 1px;">祈求者</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-3" data-type="cell" data-col="3" data-row="8" style="top: -1px; bottom: -1px; left: 273px; width: 81px; border-width: 1px;">拾取</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-4" data-type="cell" data-col="4" data-row="8" style="top: -1px; bottom: -1px; left: 353px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-5" data-type="cell" data-col="5" data-row="8" style="top: -1px; bottom: -1px; left: 433px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-6" data-type="cell" data-col="6" data-row="8" style="top: -1px; bottom: -1px; left: 513px; width: 81px; border-width: 1px;">极速神符</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-7" data-type="cell" data-col="7" data-row="8" style="top: -1px; bottom: -1px; left: 593px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-8" data-type="cell" data-col="8" data-row="8" style="top: -1px; bottom: -1px; left: 673px; width: 81px; border-width: 1px;"></div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-9" data-type="cell" data-col="9" data-row="8" style="top: -1px; bottom: -1px; left: 753px; width: 81px; border-width: 1px;">1543</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-10" data-type="cell" data-col="10" data-row="8" style="top: -1px; bottom: -1px; left: 833px; width: 81px; border-width: 1px;">2531</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-11" data-type="cell" data-col="11" data-row="8" style="top: -1px; bottom: -1px; left: 913px; width: 201px; border-width: 1px;">祈求者拾取了“极速神符”。</div><div class="datagrid-cell datagrid-cell-cell" id="zui-datagrid-fhc9bmo9te-cell-8-12" data-type="cell" data-col="12" data-row="8" style="top: -1px; bottom: -1px; left: 1113px; width: 112px; border-width: 1px;">2</div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"datagridStripedExample"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"datagrid datagrid-striped"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>选项</h3></header><article><p>所有可用的选项包括：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 140px">选项</th>
      <th style="width: 150px">名称</th>
      <th style="width: 150px">可用值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>width</code></td>
      <td>显示区域宽度</td>
      <td>默认为 <code>'auto'</code></td>
      <td>允许设置为 CSS 所支持的宽度表示形式。</td>
    </tr>
    <tr>
      <td><code>height</code></td>
      <td>显示区域高度</td>
      <td>默认为 <code>400</code></td>
      <td>当启用分页功能时，如果设置为 <code>'page'</code>，则自动将显示区域高度设置为当前页所有行的高度总和。</td>
    </tr>
    <tr>
      <td><code>dataSource</code></td>
      <td>数据源</td>
      <td>默认为 <code>null</code></td>
      <td>参见上文 "数据源" 相关内容。</td>
    </tr>
    <tr>
      <td><code>configs</code></td>
      <td>个性化配置</td>
      <td>默认为 <code>null</code></td>
      <td>参见上文 "个性化配置" 等章节相关内容。</td>
    </tr>
    <tr>
      <td><code>states</code></td>
      <td>初始化状态</td>
      <td>默认为 <code>null</code></td>
      <td>
        <p>支持如下属性：</p>
        <ul>
          <li><code>pager</code>：初始状态下的分页信息，参见上文“分页”内容；</li>
          <li><code>sortBy</code>：初始状态下的排序列，参见上文“排序”内容；</li>
          <li><code>order</code>：初始状态下的排序顺序，参见上文“排序”内容；</li>
          <li><code>selections</code>：初始状态下的行选中状态，参见上文“行选中”内容；</li>
          <li><code>search</code>：初始状态下的搜索关键字，参见上文“搜索”内容；</li>
          <li><code>fixedLeftUntil</code>：左侧固定列序号最大值，参见上文“固定行和列”内容；</li>
          <li><code>fixedTopUntil</code>：上方侧固定行序号最大值，参见上文“固定行和列”内容；</li>
          <li><code>fixedRightFrom</code>：右侧固定列序号最小值，参见上文“固定行和列”内容；</li>
          <li><code>fixedBottomFrom</code>：底部侧固定行序号最小值，参见上文“固定行和列”内容；</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>borderWidth</code></td>
      <td>单元格边框宽度</td>
      <td>默认为 <code>1</code></td>
      <td>如果设置为 <code>0</code>，则不显示单元格边框。</td>
    </tr>
    <tr>
      <td><code>rowDefaultHeight</code></td>
      <td>行高</td>
      <td>默认为 <code>36</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>colAutoDefaultWidth</code></td>
      <td>自适应列默认宽度</td>
      <td>默认为 <code>80</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>colAutoMinWidth</code></td>
      <td>自适应列最小宽度</td>
      <td>默认为 <code>50</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>showHeader</code></td>
      <td>是否显示标题行</td>
      <td>默认为 <code>true</code></td>
      <td>如果设置为 <code>false</code>，则不显示标题行，即行序号为 <code>0</code> 的行。</td>
    </tr>
    <tr>
      <td><code>headerHeight</code></td>
      <td>标题行高度</td>
      <td>默认为 <code>36</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>showRowIndex</code></td>
      <td>是否显示行序号列</td>
      <td>默认为 <code>true</code></td>
      <td>如果设置为 <code>false</code>，则不显示行序号列，即列序号为 <code>0</code> 的列。</td>
    </tr>
    <tr>
      <td><code>rowIndexWidth</code></td>
      <td>行序号列宽度</td>
      <td>默认为 <code>'auto'</code></td>
      <td>自动计算行序号列宽度</td>
    </tr>
    <tr>
      <td><code>hoverRow</code></td>
      <td>是否显示行悬停效果</td>
      <td>默认为 <code>true</code></td>
      <td>启用后，鼠标悬停在行上会高亮行。</td>
    </tr>
    <tr>
      <td><code>hoverCol</code></td>
      <td>是否显示列悬停效果</td>
      <td>默认为 <code>true</code></td>
      <td>启用后，鼠标悬停在列标题上会高亮对应的列。</td>
    </tr>
    <tr>
      <td><code>hoverCell</code></td>
      <td>是否显示单元格悬停效果</td>
      <td>默认为 <code>false</code></td>
      <td>启用后，鼠标悬停在单元格上会高亮单元格。</td>
    </tr>
    <tr>
      <td><code>responsive</code></td>
      <td>是否启用自适应列宽</td>
      <td>默认为 <code>true</code></td>
      <td>参见上文"自适应列宽"内容。</td>
    </tr>
    <tr>
      <td><code>valueOperator</code></td>
      <td>类型值转换器</td>
      <td>默认为 <code>null</code></td>
      <td>参见上文"值转换器"内容。</td>
    </tr>
    <tr>
      <td><code>defaultDateFormater</code></td>
      <td>默认日期转换格式</td>
      <td>默认为 <code>yyyy-MM-dd hh:mm</code></td>
      <td>参见上文"值转换器"内容。</td>
    </tr>
    <tr>
      <td><code>partialRendering</code></td>
      <td>是否启用局部渲染</td>
      <td>默认为 <code>'auto'</code></td>
      <td>当启用分页时，此选项自动设置为 <code>true</code>，否则默认开启。</td>
    </tr>
    <tr>
      <td><code>scrollDelay</code></td>
      <td>滚动事件响应延迟</td>
      <td>默认为 <code>0</code></td>
      <td>单位毫秒，当提高此值可以提高性能，但滚动效果存在延迟。</td>
    </tr>
    <tr>
      <td><code>renderDelay</code></td>
      <td>渲染延迟</td>
      <td>默认为 <code>100</code></td>
      <td>单位毫秒，当提高此值可以提高性能，但可能存在更新较慢的情况。</td>
    </tr>
    <tr>
      <td><code>searchFunc</code></td>
      <td>搜索筛选函数</td>
      <td>默认为 <code>null</code></td>
      <td>参见上文"搜索"内容。</td>
    </tr>
    <tr>
      <td><code>sortFunc</code></td>
      <td>排序比较函数</td>
      <td>默认为 <code>null</code></td>
      <td>参见上文"排序"内容。</td>
    </tr>
    <tr>
      <td><code>sortable</code></td>
      <td>是否启用排序</td>
      <td>默认为 <code>false</code></td>
      <td>当设置为 <code>true</code> 后允许用户点击标题行进行排序，参见上文"排序"内容。</td>
    </tr>
    <tr>
      <td><code>checkable</code></td>
      <td>是否启用行选择</td>
      <td>默认为 <code>false</code></td>
      <td>当设置为 <code>true</code> 后允许用户选中行，参见上文"行选中"内容。</td>
    </tr>
    <tr>
      <td><code>checkByClickRow</code></td>
      <td>是否允许用户点击行任意位置选中行</td>
      <td>默认为 <code>true</code></td>
      <td>当 <code>checkable</code> 设置为 <code>true</code> 时生效，参见上文"行选中"内容。</td>
    </tr>
    <tr>
      <td><code>selectable</code></td>
      <td>是否允许用户拖拽范围选中行</td>
      <td>默认为 <code>true</code></td>
      <td>当 <code>checkable</code> 设置为 <code>true</code> 时生效，参见上文"行选中"内容。</td>
    </tr>
    <tr>
      <td><code>cellCreator</code></td>
      <td>单元格生成器</td>
      <td>默认为 <code>null</code></td>
      <td>
        <p>可以设置一个回调函数用于创建单元格元素，回调函数参数包括：</p>
        <ul>
          <li><code>cell</code>：要创建的单元格对象；</li>
          <li><code>datagrid</code>：数据表格对象实例。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>cellFormator</code></td>
      <td>单元格格式化函数</td>
      <td>默认为 <code>null</code></td>
      <td>
        <p>可以设置一个回调函数用于格式化单元格元素，回调函数参数包括：</p>
        <ul>
          <li><code>$cell</code>：要格式化的单元格元素；</li>
          <li><code>cell</code>：当前单元格对象；</li>
          <li><code>datagrid</code>：数据表格对象实例。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>rowCreator</code></td>
      <td>行生成器</td>
      <td>默认为 <code>null</code></td>
      <td>
        <p>可以设置一个回调函数用于创建行元素，回调函数参数包括：</p>
        <ul>
          <li><code>rowIndex</code>：要创建的行序号；</li>
          <li><code>datagrid</code>：数据表格对象实例。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>showMessage</code></td>
      <td>出现错误时是否显示消息</td>
      <td>默认为 <code>true</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>mouseWheelFactor</code></td>
      <td>滚动鼠标滚轮时的滚动速度</td>
      <td>默认为 <code>1</code></td>
      <td></td>
    </tr>
  </tbody>
</table></div></article></section>





















































































<section><header><h3>属性和方法</h3></header><article><h4><code>setPager(page, recTotal, recPerPage)</code></h4><p>设置分页信息，参数定义如下：</p><ul>
<li><code>page</code>：要设置的当前页码，如果传递值为 <code>-1</code>，则不设置此值；</li>
<li><code>recTotal</code>：记录总数，如果传递值为 <code>-1</code>，则不设置此值；</li>
<li><code>recPerPage</code>：每页记录数，如果传递值为 <code>-1</code>，则不设置此值。</li>
</ul><p>该方法还有另一种参数形式：<code>setPager(pager)</code>，其中 <code>pager</code> 参数为一个对象，对象上的属性涵盖列上述参数。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 设置第 2 页</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">setPager</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span></code></pre><h4><code>gotoPage(page)</code></h4><p>设置当前页码，并重新渲染界面，参数定义如下：</p><ul>
<li><code>page</code>：要设置的当前页码；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 设置第 2 页</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">gotoPage</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span></code></pre><h4><code>setSearch(searchString)</code></h4><p>设置搜索关键字，参数定义如下：</p><ul>
<li><code>searchString</code>：用于搜索的关键字字符串，多个关键字使用空格分隔。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 搜索 “老虎”</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">setSearch</span><span class="pun">(</span><span class="str">'老虎'</span><span class="pun">);</span></code></pre><h4><code>search(searchString)</code></h4><p>相当于 <code>setSearch(searchString)</code>，但执行完后会重新渲染界面。</p><h4><code>setSorter(sortBy, order)</code></h4><p>设置排序规则，参数定义如下：</p><ul>
<li><code>sortBy</code>：当前用于排序的列名；</li>
<li><code>order</code>：排序顺序，可选值包括 asc（升序），desc（降序）。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 按照名称 name 降序排列</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">setSorter</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'desc'</span><span class="pun">);</span></code></pre><h4><code>sortBy(sortBy, order)</code></h4><p>相当于 <code>setSorter(sortBy, order)</code>，但执行完后会重新渲染界面。</p><h4><code>setDataSource(dataSource)</code></h4><p>重新设置数据源，参数定义如下：</p><ul>
<li><code>dataSource</code>：要设置的新的数据源对象。</li>
</ul><h4><code>getFilterParams()</code></h4><p>获取当前数据筛选信息，返回一个对象包含如下属性：</p><ul>
<li><code>page</code>: 当前显示的页码；</li>
<li><code>recPerPage</code>: 当前设定每页显示的数据个数；</li>
<li><code>search</code>: 当前用于检索数据的文本；</li>
<li><code>sortBy</code>: 当前排序依据的列名；</li>
<li><code>order</code>: 当前排序的顺序，包括顺序（<code>'asc'</code>）和倒序（<code>'desc'</code>）。</li>
</ul><h4><code>showMessage(message, type, autoCloseTime)</code></h4><p>在界面上显示一个消息，参数定义如下：</p><ul>
<li><code>message</code>：要显示的消息文本；</li>
<li><code>type</code>：消息类型，允许值包括 <code>'primary'</code>、 <code>'success'</code>、 <code>'danger'</code>、 <code>'warning'</code>、 <code>'info'</code>、 <code>'default'</code>；</li>
<li><code>autoCloseTime</code>：消息自动关闭的时间，默认为 <code>5000</code>，如果设置为 <code>0</code>，则不自动关闭。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取数据表格实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 在界面上显示 'haha' 消息。</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">showMessage</span><span class="pun">(</span><span class="str">'haha'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">);</span></code></pre><h4><code>renderLoading(loading)</code></h4><p>切换显示加载中状态指示器，其中参数定义如下：</p><ul>
<li><code>loading</code>：当设置为 <code>true</code> 时则显示加载中状态指示器，否则隐藏状态指示器，也可以设置为一个字符串，用于显示加载中指示器上的提示文本。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> myDataGrid </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myDataGrid'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.datagrid'</span><span class="pun">);</span><span class="pln">
myDataGrid</span><span class="pun">.</span><span class="pln">renderLoading</span><span class="pun">(</span><span class="str">'正在努力获取数据...'</span><span class="pun">);</span></code></pre><h4><code>getData()</code></h4><p>获取当前界面上显示对数据。</p><h4><code>getRowLayout(rowIndex)</code></h4><p>获取指定行布局信息，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要获取的行序号。</li>
</ul><h4><code>updateLayout()</code></h4><p>更新布局信息。</p><h4><code>getCell(rowIndex, colIndex)</code></h4><p>获取指定单元格信息，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要获取的单元格所在行序号；</li>
<li><code>colIndex</code>：要获取的单元格所在列序号。</li>
</ul><h4><code>getRowConfig(rowIndex)</code></h4><p>获取行配置信息，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要获取的行序号。</li>
</ul><h4><code>getColConfig(colIndex)</code></h4><p>获取列配置信息，其中参数定义如下：</p><ul>
<li><code>colIndex</code>：要获取的列序号。</li>
</ul><h4><code>getColConfigByName(colName)</code></h4><p>根据列名称获取列配置信息，其中参数定义如下：</p><ul>
<li><code>colName</code>：要获取的列名称。</li>
</ul><h4><code>getCellConfig(rowIndex, colIndex)</code></h4><p>获取指定单元格配置信息，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要获取的单元格所在行序号；</li>
<li><code>colIndex</code>：要获取的单元格所在列序号。</li>
</ul><h4><code>isRowChecked(rowId)</code></h4><p>检查指定的行是否被选中，其中参数定义如下：</p><ul>
<li><code>rowId</code>：要要检查对行编号。</li>
</ul><h4><code>checkRow(rowIndex, checked)</code></h4><p>手动设置指定行选中状态，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要设置的行序号；</li>
<li><code>checked</code>：如果为 true 设置为选中，如果为 false 设置为非选中，否则根据之前第状态切换为另一个状态。</li>
</ul><h4><code>getCheckItems()</code></h4><p>获取所有被选中的数据项。</p><h4><code>renderCell(rowIndex, colIndex)</code></h4><p>重新渲染单元格，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要操作的单元格所在行序号；</li>
<li><code>colIndex</code>：要操作的单元格所在列序号。</li>
</ul><h4><code>renderRow(rowIndex)</code></h4><p>重新渲染行，其中参数定义如下：</p><ul>
<li><code>rowIndex</code>：要操作的行序号。</li>
</ul><h4><code>renderData()</code></h4><p>重新渲染所有行及单元格。</p><h4><code>renderScrolls()</code></h4><p>重新渲染滚动条。</p><h4><code>renderFixeds()</code></h4><p>重新渲染固定的行和列。</p><h4><code>render()</code></h4><p>重新从数据源获取数据并渲染整个数据表格，包括行、列、滚动条等。</p><h4><code>setScrollbarOffset(offsetX, offsetY)</code></h4><p>设置滚动条位置，其中参数定义如下：</p><ul>
<li><code>offsetX</code>：滚动条距离左侧的距离，如果设置为 <code>null</code>，则不设置左侧滚动条距离；</li>
<li><code>offsetY</code>：滚动条距离上方的距离，如果设置为 <code>null</code>，则不设置上方滚动条距离。</li>
</ul><h4><code>scroll(scrollLeft, scrollTop)</code></h4><p>设置滚动距离，其中参数定义如下：</p><ul>
<li><code>scrollLeft</code>：水平滚动距离，如果设置为 <code>null</code>，则不设置水平滚动距离；</li>
<li><code>scrollTop</code>：垂直滚动距离，如果设置为 <code>null</code>，则不设置垂直滚动距离。</li>
</ul></article></section>



















<script src="__ZUI__/lib/selectable/zui.selectable.js"></script>
<script src="__ZUI__/lib/datagrid/zui.datagrid.js"></script>

<script>
function afterPageLoad() {
    // 获取示例数据
    var getSampleData = function() {
        var getRandomInt = function(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        };
        var getRandomData = function(arr, start, end) {
            if (start === undefined) {
                start = 0;
            }
            if (end === undefined) {
                end = arr.length;
            }
            return arr[getRandomInt(start, end - 1)];
        };
        var getLuckInt = window.getLuckInt = function(min, max, luck) {
            return (luck % (max - min) + min);
        };
        var getLuckData = window.getLuckData = function(arr, start, end, luck) {
            if (start === undefined || start === null) {
                start = 0;
            }
            if (end === undefined || end === null) {
                end = arr.length;
            }
            return arr[getLuckInt(start, end - 1, luck)];
        };
        var createDataSample = function(size) {
            size = size || 100;
            var heros = ['力丸', '幻影刺客', '祈求者', '斧王', '巫医', '天辉防御塔', 'Roshan', '嗜血狂魔', '宙斯', '影魔', '米波', '树精卫士'];
            var actions = ['击杀', '拾取', '购买', '治疗'];
            var items = ['圣剑', '虚灵之刃', '真视宝石', '恐鳌之心', '远行鞋', '治疗指环', '黑皇杖', '刷新球', '金箍棒', '蝴蝶', '诡计之雾', '显影之尘', '侦查守卫', '岗哨守卫', '漩涡', '天堂之戟', '刃甲', '希瓦的守护', '强袭胸甲', '阿托斯之棍', '银月之晶', '斯嘉蒂之眼', '玲珑心', '撒旦之邪力', '否决挂饰', '隐刀', '血棘', '邪恶镰刀', '白银之锋', '辉耀', '代达罗斯之殇', '幻影斧', '林肯法球', '阿哈利姆神杖', '死灵书'];
            var runes = ['赏金神符', '双倍神符', '魔法神符', '极速神符', '不朽之守护', '奶酪'];
            var cols = [
                {label: '时间', name: 'time', width: 130, valueType: 'gametime', sort: true},
                {label: '英雄', name: 'hero', width: 80},
                {label: '动作', name: 'action', width: 80},
                {label: '队友', name: 'teammate', width: 80},
                {label: '敌人', name: 'enemy', width: 80},
                {label: '物品/神符', name: 'item', width: 80},
                {label: '获得经验', name: 'gotexps', width: 80, valueType: 'number'},
                {label: '获得金钱', name: 'gotgolds', width: 80, valueType: 'number'},
                {label: '累计经验', name: 'exps', width: 80, valueType: 'number'},
                {label: '剩余金钱', name: 'golds', width: 80, valueType: 'number'},
                {label: '描述', name: 'desc', width: 'auto', minWidth: 200},
                {label: '累计人头', name: 'kills', width: 110, valueType: 'number'},
            ];
            var createDataItem = function(index) {
                var luckNumber = parseInt((Math.sin(index + 1) + '').substr(3));
                var time = 600 + 5*index + getLuckInt(0, 5, luckNumber);
                var action = getLuckData(actions, null, null, luckNumber);
                var heroIndex = getLuckInt(0, action === '击杀' ? 6 : 4, luckNumber);
                var hero = heros[heroIndex];
                var teammate, enemy, item;
                var heroData = {
                    golds: heroIndex*500*heroIndex + 71*index + getLuckInt(0, 71, luckNumber),
                    exps: heroIndex*300*heroIndex + 43*index + getLuckInt(0, 43, luckNumber),
                    kills: heroIndex + Math.floor(index/10)
                };
                var gotExps = 0;
                var gotGolds = 0;
                switch (action) {
                    case '击杀':
                        enemy = getLuckData(heros, 6, 9, luckNumber);
                        gotExps += getLuckInt(0, 1000 + index * 10, luckNumber);
                        gotGolds += getLuckInt(0, 200 + index * 8, luckNumber);
                        if (hero === '力丸') {
                            action = '偷摸';
                        } else if (hero === '斧王') {
                            action = '斩杀';
                        }
                        break;
                    case '购买':
                        item = getLuckData(items, null, null, luckNumber);
                        break;
                    case '拾取':
                        item = getLuckData(runes, null, null, luckNumber);
                        if (item === '赏金神符') {
                            gotExps += getLuckInt(0, 50 + index, luckNumber);
                            gotGolds += getLuckInt(0, 50 + index * 2, luckNumber);
                        }
                        break;
                    case '治疗':
                        teammate = getLuckData(heros, 0, 4, luckNumber);
                        if (hero === '巫医') {
                            action = '奶';
                        }
                        break;
                }
                heroData.golds += gotGolds;
                heroData.exps += gotExps;
                var desc = hero + action + '了“' + (item || teammate || enemy) + '”';
                if (gotGolds) {
                    desc += '，获得了金钱 ' + gotGolds;
                }
                if (gotExps) {
                    desc += '，' + (gotGolds ? '并' : '') + '获得了经验 ' + gotExps;
                }
                desc += '。';
                var dataItem = {
                    id: time,
                    time: time,
                    hero: hero,
                    action: action,
                    teammate: teammate || '',
                    enemy: enemy || '',
                    item: item || '',
                    gotgolds: gotGolds || '',
                    gotexps: gotExps || '',
                    exps: heroData.exps,
                    golds: heroData.golds,
                    kills: heroData.kills,
                    desc: desc
                };
                return dataItem;
            };
            return {
                dataSource: {
                    cols: cols,
                    length: size,
                    getByIndex: createDataItem
                },
                valueOperator: {
                    gametime: {
                        getter: function(time) {
                            var hours = Math.floor(time/3600);
                            if (hours < 10) {
                                hours = '0' + hours;
                            }
                            var mins = Math.floor(time/60)%60;
                            if (mins < 10) {
                                mins = '0' + mins;
                            }
                            var secs = time%60;
                            if (secs < 10) {
                                secs = '0' + secs;
                            }
                            return hours + ':' + mins + ':' + secs;
                        }
                    }
                },
                generate: function (size) {
                    var result = [];
                    for(var i = 0; i < size; ++i) {
                        result.push(createDataItem(i));
                    }
                    return result;
                }
            };
        };
        var sampleSize = 10000000000000;
        return createDataSample(sampleSize);
    };
    var sampleData = getSampleData();
    $('#datagridExample,#datagridBorderlessExample,#datagridStripedExample').datagrid({
        configs: {
            'R0C0': {
              label: '#'
            },
            'C1': {
              style: {textAlign: 'right'}
            },
            'C2': {
              style: {fontWeight: 'bold'}
            }
        },
        dataSource: {
            cols: sampleData.dataSource.cols,
            data: sampleData.generate(100),
            cache: true,
        },
        valueOperator: sampleData.valueOperator,
        states: {
            pager: {page: 1, recPerPage: 10},
        },
        height: 300,
        renderDelay: 200,
        checkable: true,
        sortable: true,
        hoverCell: true,
        onSelectRow: function(rowIndex, checked, selections) {
          console.log('>', rowIndex, checked, selections);
        }
    });
    var simpleDataSource = {
          cols: sampleData.dataSource.cols,
          data: sampleData.generate(50),
      };
    $('#tableDataGridExample').datagrid({
        height: 184
    });
    $('#remoteDataGridExample').datagrid({
        height: 'page',
        states: {
            pager: {page: 1, recPerPage: 5},
        },
        dataSource: {
            cache: false,
            cols:[
                {name: 'time', label: '时间', width: 132},
                {name: 'hera', label: '英雄', width: 134},
                {name: 'action', label: '动作', width: 109},
                {name: 'target', label: '目标', width: 109},
                {name: 'desc', label: '描述', width: 287}
            ],
            remote: function(params) {
                return {
                    // 原创请求地址
                    url: 'docs/partial/remote-data-' + params.page + '.json',
                    // 请求类型
                    type: 'GET',
                    // 数据类型
                    dataType: 'json'
                };
            }
        },
    });
    $('#dynamicDataGridExample').datagrid($.extend({
        defaultDateFormater: 'hh:mm:ss',
        states: {
            fixedTopUntil: 0,
            fixedBottomFrom: sampleData.dataSource.length,
            fixedRightFrom: 12,
            pager: {page: 0}
        },
        configs: {
            'C1': {
              style: {textAlign: 'right'}
            },
            'C2': {
              style: {fontWeight: 'bold', color: '#448aff'}
            }
        },
        renderDelay: 200,
        checkable: false,
        sortable: false,
    }, sampleData));
    $('#datagridFixedExample').datagrid({
        dataSource: simpleDataSource,
        valueOperator: sampleData.valueOperator,
        states: {
            pager: {page: 1, recPerPage: 100},
            fixedLeftUntil: 0,
            fixedRightFrom: 12,
            fixedTopUntil: 0,
            fixedBottomFrom: 100,
        },
        height: 300,
    });
    $('#datagridSortExample').datagrid({
        dataSource: {
            cols: sampleData.dataSource.cols,
            data: sampleData.generate(100),
        },
        valueOperator: sampleData.valueOperator,
        sortable: true,
        height: 300,
    });
    $('#datagridPageExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        valueOperator: sampleData.valueOperator,
        sortable: true,
        height: 300,
    });
    $('#datagridSearchExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        valueOperator: sampleData.valueOperator,
        sortable: true,
        height: 300,
    });
    $('#datagridCheckableExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        valueOperator: sampleData.valueOperator,
        checkable: true,
        height: 300,
    });
    $('#datagridSpanExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        configs: {
            R1C1: {colspan: 2},
            R2C3: {rowspan: 3}
        },
        valueOperator: sampleData.valueOperator,
        height: 300,
    });
    $('#datagridValueOperatorExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        valueOperator: {
            // date 值转换器会影响所以 valueType 为 `date` 的列
            gametime: {
                getter: function(dataValue, cell, dataGrid) {
                    return '第' + (Math.floor(dataValue%60)) + '分钟第' + (dataValue%60) + '秒';
                }
            }
        },
        height: 300,
    });
    $('#datagridConfigsExample').datagrid({
        dataSource: simpleDataSource,
        states: {
            pager: {page: 1, recPerPage: 20},
        },
        configs: {
            C2: {
                className: 'text-right',
                style: {
                    color: '#00b8d4',
                    backgroundColor: '#e0f7fa'
                }
            },
            R1C1: {
                style: {textDecoration: 'underline'}
            }
        },
        height: 300,
    });
}
</script><section><header><h3>事件</h3></header><article><h4><code>onRender</code></h4><p>当数据表格重新渲染后触发。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    onRender</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 表格已重新渲染</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onRender'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 表格已重新渲染</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onScroll</code></h4><p>当滚动位置发生变更时触发，其中回调函数参数包括：</p><ul>
<li><code>scrollLeft</code>：水平滚动距离；</li>
<li><code>scrollTop</code>：垂直滚动距离；</li>
<li><code>scrollInfo</code>：其他信息。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    onScroll</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">scrollLeft</span><span class="pun">,</span><span class="pln"> scrollLeft</span><span class="pun">,</span><span class="pln"> scrollInfo</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理滚动后的操作</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onScroll'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln"> scrollLeft</span><span class="pun">,</span><span class="pln"> scrollLeft</span><span class="pun">,</span><span class="pln"> scrollInfo</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理滚动后的操作</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onLoad</code></h4><p>当重新从数据源加载数据后触发，其中回调函数参数包括：</p><ul>
<li><code>result</code>：如果加载成功，则为加载后的数据列表，否则为 <code>false</code>。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    onLoad</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">result</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">result </span><span class="pun">!==</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'数据加载成功'</span><span class="pun">,</span><span class="pln"> result</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onLoad'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln"> result</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">result </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'数据加载失败。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onSelectRow</code></h4><p>当选中或取消选中表格行时触发，其中回调函数参数包括：</p><ul>
<li><code>rowId</code>：选中状态变更的行 ID；</li>
<li><code>checked</code>：<code>true</code> 表示选中，<code>false</code> 表示取消选中；</li>
<li><code>selections</code>：当前所有选中的行。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">datagrid</span><span class="pun">({</span><span class="pln">
    onSelectRow</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">rowId</span><span class="pun">,</span><span class="pln"> checked</span><span class="pun">,</span><span class="pln"> selections</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'行'</span><span class="pun">,</span><span class="pln"> rowID</span><span class="pun">,</span><span class="pln"> checked </span><span class="pun">?</span><span class="pln"> </span><span class="str">'选中了'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'取消选中了'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#dataGrid'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onLoad'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln"> result</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">result </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'数据加载失败。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><link href="__ZUI__/lib/datagrid/zui.datagrid.css" rel="stylesheet"></article></section></div>

</section>
{/block}